<template>
	<view class="column-end picker-view-time" @tap="cancel">
		<view style="width: 100%;" class="picker-view" @tap.stop>
			<view class="row-between picker-headline">
				<view @click="cancel">取消</view>
				<view style="color: #333333;font-size: 34upx;">选择时间</view>
				<view style="color: #FE5E49;" @click="confirm">确定</view>
			</view>
			<view class="row-div picker-tab">
				<view :class="{'column-div':true, 'active': type == 0}" @click="pickerTab(0)">按月</view>
				<view :class="{'column-div':true, 'active': type == 1}" @click="pickerTab(1)">按年</view>
			</view>
			<picker-view indicator-style="height: 45px;" :value="value" @change="bindChange" class="picker">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column v-if="!type">
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = date.getFullYear() - 10; i <= date.getFullYear(); i++) years.push(i);
			for (let i = 1; i <= 12; i++) months.push(i);
			return {
				type: 0,
				years,
				months,
				value: [],
				entity: null
			};
		},
		beforeMount() {
			this.pickerTab(0)

		},
		methods: {
			pickerTab(type) {
				const date = new Date()
				this.type = type;
				this.value = this.type == 0 ?  [this.selectindexDate(1).index, this.selectindexDate(
					0).index] : [this.selectindexDate(1).index];
				this.entityChange()
			},
			bindChange(e) {
				this.value = e.detail.value
				this.entityChange()
			},
			entityChange() {
				let arr = this.value
				this.entity = this.type == 0 ? {
					year: this.years[arr[0]],
					month: this.months[arr[1]]
				} : {
					year: this.years[arr[0]]
				}
			},
			selectindexDate(type) {
				const date = new Date()
				let arr = type ? this.years : this.months;
				let value = type ? date.getFullYear() : date.getMonth() + 1
				for (let i = 0; i < arr.length; i++) {
					let item = arr[i];
					if (item == value) return {
						item: item,
						index: i
					}
				}
			},
			cancel() {
				this.$emit('cancel')
			},
			confirm() {
				this.cancel()
				this.$emit('confirm', this.entity)
			}
		}
	}
</script>

<style scoped lang="scss">
	.picker-view-time {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.5);
	}

	.picker-view {
		width: 100%;
		position: relative;
		background: #FFFFFF;

		.picker-headline {
			width: 100%;
			padding: 35upx 40upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			border-bottom: 1px solid #EEEEEE;
		}

		.picker-tab {
			width: 100%;
			margin: 30upx auto;

			view {
				width: 178upx;
				height: 55upx;
				border: 1px solid #FE5E49;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FE5E49;

				&:first-child {
					border-right: none;
					border-radius: 28px 0px 0px 28px;
				}

				&:last-child {
					border-radius: 0px 28upx 28upx 0px;
				}
			}

			.active {
				background: #FE5E49;
				color: #FFFFFF;
			}

		}

		.picker {
			width: 100%;
			height: 200px;

			.item {
				height: 45px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
		}
	}
</style>
